<!DOCTYPE html>
<!--suppress ALL -->
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Declarative Rendering</title>
        <script type="text/javascript" src="../../node_modules/vue/dist/vue.js"></script>
        <style>
            @media screen and (min-width: 960px) {
                body {
                    width: 960px;
                    margin: 0 auto;
                }
            }

            h6 {
                margin: 8px 0;
                padding-top: 3px;
                border-top: 2px solid #1a5ae4;
            }

            h6::after {
                content: ':';
            }

            code {
                font-family: 'Roboto Mono', Monaco, courier, monospace;
                color: #e96900;
                padding: 3px 5px;
                margin: 0 2px;
                border-radius: 2px;
                white-space: nowrap;
                font-size: 0.8em;
                background-color: #f8f8f8;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <h6>普通事件</h6>
            <!-- v-on: 的简写 @ -->
            <!-- addCount 是在 new Vue 的实例中的 methods 中的一个方法名称 -->
            <!-- 还可以写成 @click="addCount($event)" -->
            <!-- 如果要传递其他参数可以 @click="addCount(arg1, arg2)" 或 @click="addCount($event, arg1, arg2)" -->
            <button @click="addCount">点击我</button>
            <br>
            点击了按钮 {{count}} 次.
            <h6>事件的修饰符</h6>
            修饰符:
            <ul>
                <li><code>.stop</code> event.stopPropagation(), 停止事件冒泡</li>
                <li><code>.prevent</code> event.preventDefault(), 阻止事件的默认行为</li>
                <li><code>.capture</code> 使用捕捉模式. 就是 <code>element.addEventListener(event-name, callback, use-capture);</code> 中的 use-capture 为 true</li>
                <li><code>.self</code> 只能通过当前元素触发. 如不能通过子级触发</li>
            </ul>
            使用方式: <code>&lt;a @click.stop="doSomeThing"&gt;&lt;/a&gt;</code> 或 <code>&lt;a @click.stop.prevent="doSomeThing"&gt;&lt;/a&gt;</code>
            <h6>使用快捷键触发</h6>
            键盘码参见:
            <a href="http://www.phpweblog.net/kiyone/archive/2007/04/19/1138.html" target="_blank">Keycode列表</a>,
            <a href="http://keycode.info/" target="_blank">获取某个键盘码</a> <br>
            基本语法: <code>&lt;input @keyup.13="submit"&gt;</code> 其中 <code>.13</code> 是触发 <code>keyup</code> 事件的快捷键(event.keyCode), 在此处就是 enter 键 <br>
            单个字母语法: <code>&lt;input @keyup.v="submit"&gt;</code> <code>.v</code> 表示按下 v 字母时触发<br>
            别名使用语法: <code>&lt;input @keyup.enter="submit"&gt;</code> 这里的 <code>.enter</code> 就是别名, 表示按下 enter 键触发<br>
            所有的别名:
            <ul>
                <li>enter</li>
                <li>tab</li>
                <li>delete(Delete/Backspace)</li>
                <li>esc</li>
                <li>space</li>
                <li>up</li>
                <li>down</li>
                <li>left</li>
                <li>right</li>
            </ul>
            当然还可以自定义别名, 如: <code>Vue.config.keyCodes.f1 = 112</code>
        </div>
        <script type="text/javascript" src="event.js"></script>
    </body>
</html>